<template>
  <div class="list">
    <el-card class="box-card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="监察单位名称">
          <el-input v-model="formInline.useOrgName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="gettableData" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top:15px">
      <div slot="header" class="clearfix">
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <p>监管单位数:<span style="color:red;margin:0 5px">{{useOrgNum}}</span> 电梯总数:<span style="color:red;margin:0 5px">{{maintEleTotal}}</span></p>
          <el-button size="small" type="primary" @click="addClick">添加监察单位</el-button>
          <el-button size="small" type="primary" @click="createAll">一键授权</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column label="单位名称" >
          <template slot-scope="scope">
            <div @click="infoClick(scope.row)" style="color:#0090EC;cursor: pointer;">{{scope.row.orgName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="contacts" label="联系人" width="80">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="手机" width="130">
        </el-table-column>
        <el-table-column prop="maintEleTotal" label="电梯数量" width="120">
        </el-table-column>
        <el-table-column prop="useOrgAddr" label="单位地址">
        </el-table-column>
        <el-table-column prop="userName" label="账号">
        </el-table-column>
        <el-table-column prop="date" label="操作">
          <template slot-scope="scope">
            <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button  v-show="scope.row.userName ==''" @click="createAcount(scope.row)" type="text" size="small">授权</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
      </el-pagination>
    </el-card>
    <DailogPage ref="dailog" />
  </div>
</template>

<script>
import DailogPage from './components/dailogpage.vue'
import { getadminmanageOrgInfoList,createManageAcount,createAllManageAcount } from '@/api/manageOrgManage'
export default {
  components: {
    DailogPage
  },
  data () {
    return {
      formLabelWidth: '120px',
      form: {},
      dialogVisible: false,
      maintEleTotal: '',
      useOrgNum: '',
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      formInline: {
        user: '',
      },
      tableData: []
    }
  },
  mounted () {
    this.gettableData()
  },
  methods: {
    gettableData () {
      const query = {
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        useOrgName: this.formInline.useOrgName
      }
      getadminmanageOrgInfoList(query).then(res => {
        if (res.data.code == '200') {
          this.pagination.pageTotal = res.data.data.page.total
          this.tableData = res.data.data.page.list
          this.maintEleTotal = res.data.data.maintEleTotal
          this.useOrgNum = res.data.data.useOrgNum
        }
      })
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.gettableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.gettableData()
    },
    editClick (e) {
      this.$refs.dailog.dialogVisible = true
      this.$refs.dailog.title = '单位修改'
      this.$refs.dailog.disable = false
      const params = JSON.parse(JSON.stringify(e))

      this.$refs.dailog.getCompanyInfo(params.useOrgId)
    },
    createAcount(e){
      const id=e.useOrgId
      console.log(id)
      const query = {
        id: id
      }
      createManageAcount(query).then(res => {
        if (res.data.code == '200') {
          this.gettableData()
        }
      })

    },
    createAll(){
      const query = {}
      createAllManageAcount(query).then(res => {
        if (res.data.code == '200') {
          this.gettableData()
        }
      })

    },
    addClick () {
      this.$refs.dailog.dialogVisible = true
      this.$refs.dailog.title = '单位添加'
      this.$refs.dailog.disable = false
      this.$refs.dailog.getManageOrgList()
    },
    infoClick (e) {
      this.$refs.dailog.dialogVisible = true
      this.$refs.dailog.title = '单位详情'
      this.$refs.dailog.disable = true
      const params = JSON.parse(JSON.stringify(e))
      this.$refs.dailog.getManageOrgList()
      this.$refs.dailog.getCompanyInfo(params.useOrgId)
    }
  }
}

</script>
<style lang="less" scoped>
::v-deep .el-tabs__nav-wrap {
  padding: 0 20px;
}
.el-card {
  .el-form {
    ::v-deep .el-form-item__label {
      font-weight: 800;
    }
  }
}
.list {
  .clearfix {
    font-weight: bold;
  }
  .el-input {
    width: 300px;
  }
  .el-pagination {
    margin-top: 2vh;
    text-align: right;
  }
}
</style>
